<template>
  <section>
    <div class="filter-container">
      <el-select class="w100" size="mini" v-model="listQuery.memberType" placeholder="角色" clearable>
        <el-option label="普通会员" :value="0"></el-option>
        <el-option label="合伙人" :value="1"></el-option>
        <el-option label="小店" :value="2"></el-option>
      </el-select>
      <common-input @keyup.enter.native="handleFilter" class="w200 ml10" placeholder="用户id" v-model="listQuery.uid" />
      <common-input @keyup.enter.native="handleFilter" class="w200 ml10" placeholder="关键字"
        v-model="listQuery.keyword" />
      <common-input @keyup.enter.native="handleFilter" class="w200 ml10" placeholder="上级手机号"
        v-model="listQuery.parentMobile" />
      <el-select class="w100 ml10" size="mini" v-model="listQuery.parentType" placeholder="下级类型" clearable>
        <el-option label="全部" value="0"></el-option>
        <el-option label="直属" value="1"></el-option>
        <el-option label="裂变" value="2"></el-option>
      </el-select>
      <el-button size="mini" class="ml10" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <el-table @sort-change="tblSort" :data="list" style="width: 100%">
      <el-table-column align="left" label="ID" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="头像" width="100">
        <template slot-scope="scope">
          <img v-if="scope.row.avatar" :src="scope.row.avatar" style="width:32px;height:32px;" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="昵称" width="130">
        <template slot-scope="scope">
          <span>{{ scope.row.nickName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="真实姓名" width="130">
        <template slot-scope="scope">
          <span>{{ scope.row.realName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="角色" sortable="custom" prop="role_id">
        <template slot-scope="scope">
          <span>{{ scope.row.memberTypeName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="手机号" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="上级手机号" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.parentMobile }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right" label="红包余额" sortable="custom" prop="money">
        <template slot-scope="scope">
          <span>￥{{ scope.row.redPacketAmount }}</span>
        </template>

      </el-table-column>
      <el-table-column align="right" label="可提现余额" sortable="custom" prop="money">
        <template slot-scope="scope">
          <span>￥{{ scope.row.commissionSettledAmount }}</span>
        </template>

      </el-table-column>
      <!-- <el-table-column align="right" label="红包余额" width="100" sortable="custom" prop="redpacket">
                <template slot-scope="scope">
                    <span>{{scope.row.redpacket}}</span>
                </template>
            </el-table-column>
            <el-table-column align="right" label="福利余额" width="100" sortable="custom" prop="fuli">
                <template slot-scope="scope">
                    <span>{{scope.row.fuli}}</span>
                </template>
            </el-table-column>
            <el-table-column align="right" label="鲸豆余额" width="100" sortable="custom" prop="coin">
                <template slot-scope="scope">
                    <span>{{scope.row.coin}}</span>
                </template>
            </el-table-column> -->
      <!-- <el-table-column align="center" label="开始日期" width="130" sortable="custom" prop="start_at">
        <template slot-scope="scope">
          <span>{{ scope.row.startAt }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="结束日期" width="130" sortable="custom" prop="end_at">
        <template slot-scope="scope">
          <span>{{ scope.row.endAt }}</span>
        </template>
      </el-table-column> -->
      <el-table-column align="center" label="状态" width="100" sortable="custom" prop="status">
        <template slot-scope="scope">
          <el-tag :type="getStatusColor(scope.row)">{{ scope.row.statusText }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="60">
        <template slot-scope="scope">
          <el-dropdown v-if="!isSelect">
            <el-button type="text">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleUpdate(scope.row)">编辑用户</el-dropdown-item>
              <el-dropdown-item v-if="scope.row.status == 0"
                @click.native="handleCheck2(scope.row)">取消封禁</el-dropdown-item>
              <el-dropdown-item @click.native="handleMoney(scope.row)">资金流水</el-dropdown-item>
              <el-dropdown-item @click.native="handleMoneyForm(scope.row)">调节资金</el-dropdown-item>
              <el-dropdown-item @click.native="handleRedpacket(scope.row)">红包记录</el-dropdown-item>
              <el-dropdown-item @click.native="handleRecharge(scope.row)">调节红包</el-dropdown-item>
              <!-- <el-dropdown-item @click.native="handleFuli(scope.row)">福利记录</el-dropdown-item> -->
              <!-- <el-dropdown-item @click.native="handleFuliRecharge(scope.row)">赠送福利</el-dropdown-item> -->
              <el-dropdown-item @click.native="handleDelete(scope.row)">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button v-else type="primary" size="mini" @click="okSelect(scope.row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageNum" :page-sizes="[20, 30, 50]" :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>

    <el-dialog title="调节红包" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="500px">
      <el-form :model="rechargeForm" ref="rechargeForm" label-width="150px">
        <el-form-item label="调节红包" prop="money">
          <el-input type="number" size="mini" placeholder="" v-model="rechargeForm.money" maxlength="10" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <common-input type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="" maxlength="100"
            v-model="rechargeForm.remark" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
        <el-button :loading="rechargeLoading" size="mini" type="primary" @click="okRecharge()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="红包记录" :visible.sync="dialogRedpacketVisible" :close-on-click-modal="false" width="1000px">
      <redpacket-list :uid="redpacketForm.uid" />
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogRedpacketVisible = false" type="primary">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog title="调节资金" :visible.sync="dialogMoneyFormVisible" :close-on-click-modal="false" width="500px">
      <el-form :model="moneyUpdateForm" ref="moneyUpdateForm" label-width="150px">
        <el-form-item label="调节资金" prop="money">
          <el-input type="number" size="mini" placeholder="" v-model="moneyUpdateForm.money" maxlength="10" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <common-input type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="" maxlength="100"
            v-model="moneyUpdateForm.remark" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogMoneyFormVisible = false">取消</el-button>
        <el-button :loading="rechargeLoading" size="mini" type="primary" @click="okMoney()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="资金流水" :visible.sync="dialogMoneyVisible" :close-on-click-modal="false" width="1000px">
      <money-list :formData.sync="moneyForm" :uid="moneyForm.uid" />
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogMoneyVisible = false" type="primary">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="福利记录" :visible.sync="dialogFuliVisible" :close-on-click-modal="false" width="1000px">
      <fuli-list :formData.sync="fuliForm" />
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFuliVisible = false" type="primary">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog title="赠送福利" :visible.sync="dialogFuliFormVisible" :close-on-click-modal="false" width="500px">
      <el-form :model="fuliRechargeForm" ref="fuliRechargeForm" label-width="150px">
        <el-form-item label="赠送福利" prop="money">
          <el-input type="number" size="mini" placeholder="" v-model="fuliRechargeForm.money" maxlength="10" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <common-input type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="" maxlength="100"
            v-model="fuliRechargeForm.remark" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFuliFormVisible = false">取消</el-button>
        <el-button :loading="fuliRechargeLoading" size="mini" type="primary" @click="okFuliRecharge()">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑用户" :visible.sync="dialogEditVisible" :close-on-click-modal="false" width="500px">
      <el-form :model="editForm" ref="editForm" label-width="150px">
        <el-form-item label="昵称" prop="nickName">
          <el-input type="text" size="mini" placeholder="" v-model="editForm.nickName" />
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input type="text" size="mini" placeholder="" v-model="editForm.realName" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input type="text" size="mini" placeholder="" v-model="editForm.mobile" />
        </el-form-item>
        <el-form-item label="上级手机号" prop="parentMobile" v-if="!editForm.parentId">
          <el-input type="text" size="mini" placeholder="" v-model="editForm.parentMobile" />
        </el-form-item>
        <el-form-item label="开始日期" prop="startAt">
          <el-date-picker size="mini" v-model="editForm.startAt" type="date" format="yyyy-MM-dd"
            value-format="yyyy-MM-dd" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="endAt">
          <el-date-picker size="mini" v-model="editForm.endAt" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="text" size="mini" placeholder="" v-model="editForm.password" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="editForm.status">
            <el-radio label="1">正常</el-radio>
            <el-radio label="0">封禁</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否核销人员" prop="verification">
          <el-radio-group v-model="editForm.verification">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">不是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogEditVisible = false">取消</el-button>
        <el-button :loading="editLoading" size="mini" type="primary" @click="okEdit()">确定</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import {
  member_list,
  seller_del,
  member_check2,
  member_check,
  seller_refuse,
  member_update_redpacket,
  member_update_money,
  member_update_fuli,
  memberEdit,
  commissionRecordList
} from '../../api/member';
export default {
  components: {
    'redpacket-list': () => import('../../components/Member/redpacket_list'),
    'money-list': () => import('../../components/Member/money_list'),
    'fuli-list': () => import('../../components/Member/fuli_list'),
  },
  props: {
    formData: Object
  },
  data() {
    return {
      editLoading: false,
      dialogEditVisible: false,
      editForm: {
        id: undefined,
        nickName: undefined,
        realName: undefined,
        mobile: undefined,
        parentMobile: undefined,
        status: 1,
        password: undefined,
        parentId: 0,
        startAt: undefined,
        endAt: undefined,
        verification: 0

      },
      isAgent: false,
      redpacketForm: {
        uid: 0
      },
      moneyForm: {
        uid: 0
      },
      fuliForm: {
        uid: 0
      },
      dialogMoneyFormVisible: false,
      dialogMoneyVisible: false,
      dialogRedpacketVisible: false,
      dialogFuliVisible: false,
      isSelect: false,
      dialogFormVisible: false,
      dialogFuliFormVisible: false,
      rechargeLoading: false,
      fuliRechargeLoading: false,
      list: null,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        keyword: undefined,
        status: '',
        uid: undefined,
        isAgent: 0,
        roleId: undefined,
        parentMobile: undefined,
        parentType: "0",
        memberType: 0
      },
      total: null,
      activeName: '0',
      rechargeForm: {
        uid: 0,
        money: undefined,
        remark: undefined,
      },
      moneyUpdateForm: {
        uid: 0,
        money: undefined,
        remark: undefined,
      },
      fuliRechargeForm: {
        uid: 0,
        money: undefined,
        remark: undefined,
      },
    };
  },
  mounted() {
  },
  watch: {
    formData: {
      immediate: true,
      handler(val) {
        this.isSelect = val.is_select;
        this.isAgent = val.is_agent;
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    tblSort(d) {
      this.listQuery.orderCol = d.prop;
      this.listQuery.orderAsc = d.order;

      this.handleFilter();
    },
    okEdit() {
      this.editLoading = true;
      memberEdit(this.editForm).then((res) => {
        this.editLoading = false;
        this.dialogEditVisible = false;
        this.$message.success("编辑成功");
        this.getList();
      }).catch((err) => {
        this.editLoading = false;
      })
    },
    handleRedpacket(item) {
      console.log(item);
      this.redpacketForm.uid = item.id;
      this.dialogRedpacketVisible = true;
    },
    handleFuli(item) {
      this.fuliForm.uid = item.id;
      this.dialogFuliVisible = true;
    },
    handleMoney(item) {
      // console.log(item.id);
      this.moneyForm.uid = item.id;
      //   console.log(this.moneyForm);
      this.dialogMoneyVisible = true;
    },
    getList() {
      this.listLoading = true;
      // this.listQuery.isAgent = this.isAgent ? 1 : 0;
      member_list(this.listQuery).then(response => {
        this.list = response.data.list;
        // if(this.isAgent && this.listQuery.pageNum == 1) {
        //     this.list.unshift(
        //         {
        //             id: 0,
        //             nickName : "平台合伙人",
        //             status: 1,
        //             roleName: "平台合伙人",
        //             money: 0,
        //         }
        //     )
        // }
        this.total = response.data.total;
        this.listLoading = false;
      })
    },
    handleFilter() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleClick(tab, event) {
      this.listQuery.status = this.activeName;
      this.handleFilter();
      // console.log(this.activeName)
    },
    handleUpdate(row) {
      this.editForm.id = row.id;
      this.editForm.nickName = row.nickName;
      this.editForm.realName = row.realName;
      this.editForm.mobile = row.mobile;
      this.editForm.parentMobile = row.parentMobile;
      this.editForm.status = "" + row.status;
      this.editForm.password = undefined;
      this.editForm.parentId = row.parentId;
      this.editForm.startAt = row.startAt;
      this.editForm.endAt = row.endAt;
      this.editForm.verification = row.verification;
      this.dialogEditVisible = true;
    },
    getStatusColor(row) {
      if (row.status === 1) {
        return "success"
      }

      return "danger"
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          seller_del(row.id)
            .then(() => {
              this.$message.success("商户删除成功");
              const index = this.list.indexOf(row);
              this.list.splice(index, 1);
            });
        }).catch(() => { });
    },
    handleCheck(row) {
      this.$confirm('确定封禁?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          member_check(row.id)
            .then(() => {
              this.$message.success("封禁成功");
              this.getList();
            });
        }).catch(() => { });
    },
    handleCheck2(row) {
      this.$confirm('确定取消封禁?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          member_check2(row.id)
            .then(() => {
              this.$message.success("取消封禁成功");
              this.getList();
            });
        }).catch(() => { });
    },
    handleRefuse(row) {
      this.$confirm('确定拒绝审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          seller_refuse(row.id)
            .then(() => {
              this.$message.success("商户拒绝审核成功");
              this.getList();
            });
        }).catch(() => { });
    },
    handleRecharge(row) {
      this.rechargeForm.uid = row.id;
      this.rechargeForm.money = undefined;
      this.rechargeForm.remark = "调节红包";

      this.dialogFormVisible = true;
    },
    handleMoneyForm(row) {
      this.moneyUpdateForm.uid = row.id;
      this.moneyUpdateForm.money = undefined;
      this.moneyUpdateForm.remark = "调节资金";

      this.dialogMoneyFormVisible = true;
    },
    handleFuliRecharge(row) {
      this.fuliRechargeForm.uid = row.id;
      this.fuliRechargeForm.money = undefined;
      this.fuliRechargeForm.remark = "赠送福利";

      this.dialogFuliFormVisible = true;
    },
    okSelect(item) {
      this.$emit('okSelect', item);
    },
    okRecharge() {
      if (typeof this.rechargeForm.money == undefined) {
        this.$message.error("请输入赠送金额");
      }

      let money = $.trim(this.rechargeForm.money);
      if (money.length < 1) {
        this.$message.error("请输入赠送金额");
      } else {
        money = Number(money) || 0;

        if (money == 0) {
          this.$message.error("请输入赠送金额");
        } else {
          this.rechargeLoading = true;
          member_update_redpacket(this.rechargeForm).then((re) => {
            this.rechargeLoading = false;
            this.$message.success("成功调节红包");
            this.dialogFormVisible = false;
            this.getList();
          }).catch((err) => {
            this.rechargeLoading = false;
          })
        }
      }
    },
    okFuliRecharge() {
      if (typeof this.fuliRechargeForm.money == undefined) {
        this.$message.error("请输入赠送金额");
      }

      let money = $.trim(this.fuliRechargeForm.money);
      if (money.length < 1) {
        this.$message.error("请输入赠送金额");
      } else {
        money = Number(money) || 0;

        if (money == 0) {
          this.$message.error("请输入赠送金额");
        } else {
          this.fuliRechargeLoading = true;
          member_update_fuli(this.fuliRechargeForm).then((re) => {
            this.fuliRechargeLoading = false;
            this.$message.success("成功赠送福利");
            this.dialogFuliFormVisible = false;
            this.getList();
          }).catch((err) => {
            this.fuliRechargeLoading = false;
          })
        }
      }
    },
    okMoney() {
      if (typeof this.moneyUpdateForm.money == undefined) {
        this.$message.error("请输入赠送金额");
      }

      let money = $.trim(this.moneyUpdateForm.money);
      if (money.length < 1) {
        this.$message.error("请输入赠送金额");
      } else {
        money = Number(money) || 0;

        if (money == 0) {
          this.$message.error("请输入赠送金额");
        } else {
          this.rechargeLoading = true;
          member_update_money(this.moneyUpdateForm).then((re) => {
            this.rechargeLoading = false;
            this.$message.success("成功调节资金");
            this.dialogMoneyFormVisible = false;
            this.getList();
          }).catch((err) => {
            this.rechargeLoading = false;
          })
        }
      }
    }
  }
};
</script>
